বুটস্ট্রাপ টিউটোরিয়াল: আমাদের এই বুটস্ট্রাপ টিউটোরিয়ালটিতে খুব সহজভাবে বুটস্ট্রাপ এর সমস্ত কম্পোনেন্ট আলোচনা করা হয়েছে। যেন আপনিও খুব সহজেই বুঝতে পারেন।
রেসপন্সিভ এবং মোবাইল-ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে টুইটার বুটস্ট্রাপ হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক।
এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy
করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy
করা কোড paste
করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।\
kt_satt_skill_example_id=759
রেসপন্সিভ ওয়েব ডিজাইন কি?
রেসপন্সিভ ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই এডজাস্ট করে নিতে পারে।
বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলোপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি পায়।
২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্টে হিসেবে বিবেচিত হয়!
বুটস্ট্রাপ এর সুবিধাঃ
আপনার ওয়েব সাইটে বুটস্ট্রাপ ব্যবহার করার জন্য দুইটি পদ্ধতি আছে।
যেভাবে পাবেনঃ
getbootstrap.com
থেকে ডাউনলোড করে
যদি আপনি নিজের বুটস্ট্রাপ ডাউনলোড এবং হোস্ট করতে চান তাহলে getbootstrap.com, এ যান এবং পদ্ধতিগুলো অনুসরন করুন।
যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (CDN = Content Delivery Network)।
MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে। এগুলোর পাশাপাশি এছাড়াও আপনাকে অবশ্যই জেকুয়েরি লাইব্রেরি যুক্ত করতে হবেঃ
kt_satt_skill_example_id=761
১। এইচটিএমএল(৫) DOCTYPE যুক্ত করুন।
বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপার্টি ব্যবহৃত হয়, যার জন্য এইচটিএমএল(৫) DOCTYPE নির্ধারন করা বাধ্যতামূলক।
সবসময়ই পেজের শুরুতেই এইচটিএমএল(৫) DOCTYPE যুক্ত করুনঃ
kt_satt_skill_example_id=763
২। বুটস্ট্রাপ(৩) মোবাইল-ফার্স্ট
বুটস্ট্রাপ(৩) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ।
যথাযথ আউটপুট এবং টাচ জুমিং এর জন্য এলিমেন্টের মধ্যে
ট্যাগ নিশ্চিত করুনঃ
kt_satt_skill_example_id=764
ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width
ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)।
পেইজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1
ব্যবহার করা হয়েছে।
৩। কন্টেইনার
বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়।
বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। আপনার প্রয়োজন অনুযায়ী কন্টেইনার বাচাই করে নিনঃ
.container
ক্লাস ব্যবহার করুন।.container-fluid
ক্লাস ব্যবহার করুন।নোটঃ কন্টেইনারগুলো নেস্টেবল নয় (আপনি চাইলেই কন্টেইনারের মধ্যে কন্টেইনার রাখতে পারবেন না)।
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (ফিক্সড প্রস্থের কন্টেইনার সহ)
kt_satt_skill_example_id=765
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (পূর্ণ প্রস্থের কন্টেইনার সহ)
kt_satt_skill_example_id=766
স্যাট একাডেমীতে বুটস্ট্রাপ সিএসএস ক্লাস, কম্পোনেন্ট এবং জাভাস্ক্রিপ্ট প্লাগ-ইনের সম্পূর্ণ রেফারেন্স রয়েছে। এছাড়াও প্রত্যেক অধ্যায়কেই "নিজে চেষ্টা করি " উদাহরণ দিয়ে সাজানো হয়েছে:
বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।
আপনি যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করতে না চান, তাহলে আপনি কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক প্রস্থের কলাম তৈরি করতে পারবেনঃ
span 12 | |||||||||||
span 6 | span 6 | ||||||||||
span 4 | span 8 | ||||||||||
span 4 | span 4 | span 4 | |||||||||
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
বুটস্ট্রাপের গ্রীড সিস্টেম সম্পূর্ণ রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়।
বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছেঃ
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
নিচে বুটস্ট্রাপ গ্রীডের বেসিক গঠন দেখানো হলোঃ
kt_satt_skill_example_id=767
প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( < div class="container">
)। তারপর, একটি সারি তৈরি করুন (< div class="row">
) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করুন। ( .col-*-*
ক্লাসের সাহায্যে)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।
নিচে বুটস্ট্রাপ বেসিক গ্রীড লে-আউটের কিছু উদাহরণ দেয়া হলো।
নিম্নলিখিত উদাহরনে সমান প্রস্থের তিনটি কলাম তৈরি করা হলো যা ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপে সমান তিন ভাগে ভাগ হবে কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটির পর একটি নিচে নিচে অবস্থান করবেঃ
kt_satt_skill_example_id=769
নিম্নলিখিত উদাহরনে কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপের জন্য তৈরি করা যায় তা দেখানো হলোঃ
kt_satt_skill_example_id=770
বুটস্ট্রাপে গ্লোবাল ফন্ট-সাইজ হলো ১৪ পিক্সেল, এবং লাইন-উচ্চতা হলো ১.৪২৮।
এটি < body >
এবং সকল প্যারাগ্রাফ এলিমেন্টের জন্য প্রযোজ্য।
সকল < p >
এলিমেন্টের নিচে মার্জিন আছে যা তার লাইন-উচ্চতার অর্ধেক। (ডিফল্ট হচ্ছে ১০ পিক্সেল)।
এই অধ্যায়ে, আমরা এইচটিএমএল এলিমেন্টের দিকে তাকালে দেখতে পাবো যে ব্রাউজারের ডিফল্ট স্টাইলের চেয়ে বুটস্ট্রাপের ডিফল্ট স্টাইলে কিছুটা ভিন্নতা রয়েছে।
< h1 >
- < h6 >
বুটস্ট্রাপ এইচটিএমএল হেডিং এলিমেন্টগুলোকে (< h1 >
থেকে < h6 >
) নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=776
< small >
বুটস্ট্রাপে এইচটিএমএল < small >
এলিমেন্ট যেকোনো হেডিং এ একটি লাইটার, সেকেন্ডারি টেক্সট তৈরি করেঃ
kt_satt_skill_example_id=777
< mark >
বুটস্ট্রাপ এইচটিএমএল < mark >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=778
< abbr >
বুটস্ট্রাপ এইচটিএমএল < abbr >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=779
< blockquote >
বুটস্ট্রাপ এইচটিএমএল < blockquote >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=780
কোটেশনকে ডানদিকে দেখানোর জন্য .blockquote-reverse
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=782
< dl >
বুটস্ট্রাপ এইচটিএমএল < dl >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=784
< code >
বুটস্ট্রাপ এইচটিএমএল < code >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=786
< kbd >
বুটস্ট্রাপ এইচটিএমএল < kbd >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=789
< pre >
বুটস্ট্রাপ এইচটিএমএল < pre >
এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
kt_satt_skill_example_id=791
বুটস্ট্রাপের কিছু কনটেকচুয়াল ক্লাস আছে যারা "অর্থবহ কালার" নির্ধারন করে।
টেক্সট কালারের জন্য ক্লাসগুলো হচ্ছেঃ .text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
, এবং .text-danger
:
kt_satt_skill_example_id=793
ব্যাকগ্রাউন্ড কালারের ক্লাসগুলো হচ্ছেঃ .bg-primary
, .bg-success
, bg-info
, bg-warning
, এবং .bg-danger
:
kt_satt_skill_example_id=794
এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য নিম্নোক্ত বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা যায়ঃ
ক্লাস | বর্ণনা | উদাহরণ |
---|---|---|
.lead | একটি প্যারাগ্রাফকে লক্ষ্যনীয় করে তু্লে। | উদাহরণ দেখুন |
.small | ছোট টেক্সটকে নির্দেশ করে (প্যারেন্টের ৮৫% সাইজে সেট করে) | উদাহরণ দেখুন |
.text-left | টেক্সটকে বামে এ্যালাইন করে। | উদাহরণ দেখুন |
.text-center | টেক্সটকে মাঝখানে এ্যালাইন করে। | উদাহরণ দেখুন |
.text-right | টেক্সটকে ডানে এ্যালাইন করে। | উদাহরণ দেখুন |
.text-justify | টেক্সটকে justify করে। | উদাহরণ দেখুন |
.text-nowrap | টেক্সটে no wrap করে। | উদাহরণ দেখুন |
.text-lowercase | ছোট হাতের লেখাতে পরিনত করে। | উদাহরণ দেখুন |
.text-uppercase | বড় হাতের লেখাতে পরিনত করে। | উদাহরণ দেখুন |
.text-capitalize | লেখাকে capitalize করে। | উদাহরণ দেখুন |
.list-unstyled | ডিফল্ট লিস্ট-স্টাইল এবং বাম দিকের মার্জিন মুছে ফেলে( এবং উভয়ের ক্ষেত্রে কাজ করে )। এই ক্লাস শুধু নেস্টেড লিস্টের সবচেয়ে কাছাকাছি লিস্টে ব্যবহার হয় (এই ক্লাস যেকোনো নেস্টেড লিস্টের ডিফল্ট লিস্ট-স্টাইল মুছে দেয়)। | উদাহরণ দেখুন |
.list-inline | সকল লিস্ট আইটেমকে একটি একক লাইনে পরিনত করে ফেলে। | উদাহরণ দেখুন |
.dl-horizontal | একের পর এক লিস্টের বর্ণনা দেয়। | উদাহরণ দেখুন |
বেসিক বুটস্ট্রাপ টেবিলের মধ্যে হালকা প্যাডিং থাকে এবং টেবিলের সারিগুলোর মধ্যে অনুভুমিক ডিভাইডার থাকে।
বেসিক/সাধারণ বুটস্ট্রাপ টেবিল তৈরি করার জন্য < table >
এলিমেন্টের মধ্যে .table
অন্তর্ভুক্ত করুনঃ
kt_satt_skill_example_id=816
ক্লাস | বর্ণনা | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
.table | যেকোনো
|